#Android #Android_Compose

1. 둘은 태생이 다르다.

Surface는 Material3에 속해있고, Box는 Compose Layout에 속해있다.
이 말은 나에게 Surface는 디자인적인 요소, Box는 레이아웃 배치의 역할을 맡는다는 의미로 다가온다.

2. Surface

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface is modified by tonal variance.

• Surface Source Code

"surface는 주어진 elevation에 존재한다."는 설명이 제일 먼저 나온다.
그리고 이후 surface의 책임으로 Clipping, Borders, Background, Content Color가 설명된다. 이것으로 봤을 때 Surface는 Elevation을 사용해야 하는 작업을 할 때 바탕이 되는 존재라는 생각이 든다. 바탕이 되기 때문에 Clipping이나 Borders에 대한 책임이 있는 것이다.

3. Box

A layout composable with content.

• Box Source Code

Box는 Layout Composable이다. (Compose Layout Android Document)
Layout은 컴포넌트들의 상하좌우와 같은 위치에 대한 배치와 관련된 것이다. (디자인적인 Surface와는 다르다.) Layout Composable 중에서도 중첩배치와 관련이 있다.

4. Surface와 Box의 Use Case

Surface는 elevation, shape, clipping, background에 대한 설정을 좀 더 편하게 할 수 있도록 만들어져있다. 하지만, Surface는 Content Composable이 반드시 있어야 한다. 반면, Box는 Surface의 기능을 구현하기 위해서는 수정자를 이용해야 한다. 하지만 Box 안의 컴포넌트 배치를 어떻게 할 것인가에 대한 파라미터(contentAlignment)가 있다. 또 하나 주목할 점은 Content Composable을 받지 않는 Box도 있다는 것이다.

위의 모든 내용을 종합해서 생각해봤을 때 아래의 경우로 나눌 수 있을 것 같다. (use case가 더 생각나는대로 추가 예정.)

4-1. Surface Use Case

• Elevation 적용이 필요한 (shadow나 컴포넌트와 컴포넌트 사이의 z인덱스를 조정해야하는 경우) 카드, 버튼등을 구현할 때
• Circle, RoundedCorner등의 모양에 컨텐츠를 추가할 때

4-2. Box Use Case

• 중첩이 필요한 레이아웃을 구성할 때
• ConstraintLayout 내에서 배경을 독립적으로 구성하고 싶을 때 (WeatherAppUi - mishamoovex github)